<template>
  <li>
    <h3>姓名:{{ name }}</h3>
    <p>
      爱好:
      <span v-for="item in hobby" :key="item"> {{ item }} </span>
    </p>
  </li>
</template>

<script>
export default {
  name: "Item",
  //props的第一种写法:数组写法
  // props: ["name", "hobby"],
  //props的第二种写法:对对象限制类型写法
  /* props: {
    name: String,
    hobby: Array,
    count: Number,
  }, */
  //props的第三种写法:对类型等各种限制的写法
  props: {
    name: {
      type: String,
      required: true,
      default: "张三",
    },
    hobby: Array,
    // 我们可以做自定义规则限制
    count: {
      // validator是用来给某个props做自定义限制规则的,参数value就是props接受的值,如果函数返回true,则通过校验,否则不通过
      validator(value) {
        const arr = [0, 3, 5, 8];
        return arr.includes(value);
      },
    },
  },
};
</script>

<style></style>
